import React, { useEffect, useState } from 'react'
import { Card, Button, Modal, Table, Form, Input, Upload, Popconfirm } from 'antd';
import { PlusOutlined, EditOutlined, CloseOutlined, LoadingOutlined } from '@ant-design/icons'
import { nameAPI, addAPI, modyfyAPI, delByIdAPI } from "../service/auth";

export default function List() {
  const [visible, setVisible] = useState(false)   //控制弹框显示隐藏
  const [uesrlist, setUserlist] = useState([])   //获取商品列表
  const [total, setTotal] = useState()      // 获取总条数
 /*  const [page] */
  const [loading, setLoading] = useState(false)    // loading显示
  const [currentId, setCurrentId] = useState('')
  const [form] = Form.useForm()   //实例化一个form对象，这样才能拿到form里面的数据
  useEffect(() => {
    loadData()
  }, [])
 
  const loadData = async (
     page) => {
    const res = await nameAPI({per:4,page})
    console.log(res)
    setUserlist(res.products)
    setTotal(res.totalCount)
  }
  const handleOk = () => { }
  const handleCancel = () => {
    setVisible(false)
  }

   // 点击提交按钮
   const onFinish = (values) => {
    console.log('Success:', values);
    if (currentId) {  //如果存在，执行编辑
      modyfyAPI(currentId, { ...values }).then(res => {
        loadData()    //重新加载数据
        setVisible(false)   //关闭弹框
      })
    } else {
      // 添加数据
      addAPI({ ...values }).then(res => {
        loadData()
        setVisible(false)
      })
    }

  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };


  const columns = [
    {
      title: '序号',
      render(text, record, index) {
        return <>{index + 1}</>
      }
    },
    {
      title: '用户',
      dataIndex: 'name',
    },
    {
      title: '电话',
      dataIndex: 'price',

    },
    {
      title: '住址',
      dataIndex: 'descriptions',

    },
    {
      title: '品类',
      dataIndex: 'content',
    },
    {
      title: '来访',
      dataIndex: 'coverImg',
    },
    {
      title: '接待人',
      dataIndex: 'waiter',
    },
    {
      title: '操作',
      render(text, record, index) {
        return (<>
          <Button type='primary' icon={<EditOutlined />} onClick={() => {
             setVisible(true)
             form.setFieldsValue({ name: record.name })
              setCurrentId(record._id)
          }}></Button>
          <Popconfirm title="确定要删除吗?" cancelText="取消" okText="确定" onConfirm={() => {
            // alert(record._id)
             delByIdAPI(record._id).then(res => {
               loadData()
             })
          }}>
            <Button type="primary" icon={<CloseOutlined />} danger ></Button>
          </Popconfirm>
        </>)
      }
    },
  ]

  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };
 
  return (
    <>
      <Card
        title="客户列表">
        <Table
          rowKey="_id"
          dataSource={uesrlist}
          columns={columns}
          pagination={{
            page: 1,
            pageSize:4,
            pageSizeOptions:[4],
            total,
         
            onChange(page) {
              loadData(page)
            }
          }}
        />
        <Modal footer={null} title="修改信息" visible={visible} onOk={handleOk} onCancel={handleCancel}>
          <Form
            {...layout}
            form={form}
            name="basic"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              label="名字"
              name="name"
              rules={[
                {
                  required: true,
                  message: '名字不能为空',
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="电话"
              name="price"
              rules={[
                {
                  required: true,
                  message: '电话不能为空',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="住址"
              name="descriptions"
              rules={[
                {
                  required: true,
                  message: '地址不能为空',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="品类"
              name="content"
              rules={[
                {
                  required: true,
                  message: '品类不能为空',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="来访"
              name="coverImg"
              rules={[
                {
                  required: true,
                  message: '不能为空',
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="接待人"
              name="waiter"
              rules={[
                {
                  required: true,
                  message: '请填写接待人',
                },
              ]}
            >
              <Input />
            </Form.Item>


            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit">
                提交
            </Button>
            </Form.Item>
          </Form>
        </Modal>
      </Card>
    </>
  )
}
